<template>
  <div id="app">
    <!--头部导航区域-->
    <!-- <app-head :navList="navList"></app-head> -->
    <!--核心区域:分左右两边-->
    <!-- <app-foot></app-foot> -->
    <!-- <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul> -->
    <div id="box">
      <h1>测试</h1>
    </div>
  </div>
</template>
<script>
//引入第三方css资源
import "./assets/css/bootstrap.min.css";
import "./assets/css/dashboard.css";
//1.导入子组件
// import appHead from "@/components/header.vue";
// import appFoot from "./components/footer.vue";
export default {
  data() {
    return {
      navList: [
        {
          id: 1,
          name: "vue",
        },
        {
          id: 2,
          name: "react",
        },
        {
          id: 3,
          name: "jquery",
        },
      ],
      // dataList: [
      //   {
      //     id: 1,
      //     name: "vue",
      //   },
      //   {
      //     id: 2,
      //     name: "react",
      //   },
      //   {
      //     id: 3,
      //     name: "jquery",
      //   },
      // ],
    };
  },

  //2.注册组件
  components: {
    // appHead,
    // appFoot,
  },
};
</script>
<style lang="scss">
// scoped该样式只作用于该组件
@import "./assets/sass/common.scss";
@import "./assets/sass/vw.scss";

#box {
  width: vw(200);
  height: vw(200);
  background: #58bc58;
  font-size: vw(24);
  // h2 {
  //   color: red;
  // }
}
</style>
